<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
<head>
    <meta charset="utf-8">
    <title>权限管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/resources/layui/css/layui.css"/>
    <link rel="stylesheet" href="/resources/layui/layui-ext/dtree/dtree.css">
    <link rel="stylesheet" href="/resources/layui/layui-ext/dtree/font/dtreefont.css">

</head>
<body>
<div style="padding: 20px 10px 0px">
    <fieldset class="layui-elem-field" shiro:hasPermission="permission:view">
        <legend>查询条件</legend>
        <div class="layui-field-box">
            <form class="layui-form" action="" id="searchFrm">
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">权限名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入权限名称" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-input-inline">
                    <label class="layui-form-label">权限编码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="percode" placeholder="请输入权限编码" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" style="text-align: center;">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button>
                        <button type="reset" class="layui-btn layui-btn-primary" id="doReset">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>
</div>
<table id="permissionTable" lay-filter="permissionTable"></table>

<!--toolbar开始-->
<div id="tableToolbar" style="display: none;">
    <button type="button" shiro:hasPermission="permission:create" class="layui-btn" lay-event="add">添加</button>
    <!--<button type="button" shiro:hasPermission="permission:batchdelete"  class="layui-btn layui-btn-danger" lay-event="batchDelete">批量删除</button>-->
</div>
<div id="cellToolbar" style="display: none;">
    <button type="button" shiro:hasPermission="permission:update" class="layui-btn layui-btn-sm layui-btn-xs" lay-event="update">修改</button>
    <button type="button" shiro:hasPermission="permission:delete" class="layui-btn layui-btn-danger layui-btn-sm layui-btn-xs" lay-event="delete">删除</button>
</div>
<!--toolbar结束-->

<!--添加修改弹出层开始-->
<form class="layui-form" id="addForm" lay-filter="addForm" action="" style="display: none;padding: 20px">
    <div class="layui-form-item">
        <label class="layui-form-label">父级权限：</label>
        <div class="layui-input-block">
            <div class="layui-unselect layui-form-select" id="permissionaccordiontree">
                <div class="layui-select-title">
                    <input type="hidden" name="id" id="id">
                    <input type="hidden" id="pid" name="pid" required class="layui-input layui-unselect">
                    <input type="text" name="pname" id="input_permissionaccordiontree" placeholder="请选择" required
                           readonly="" class="layui-input layui-unselect">
                    <i class="layui-edge"></i>
                </div>
            </div>
            <div class="layui-card" id="test">
                <div class="layui-card-body">
                    <div id="toolbarDiv">
                        <ul id="slTree" class="dtree" data-id="0" style="width: 100%;"></ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序码</label>
        <div class="layui-input-block">
            <input type="text" id="ordernum" name="ordernum" required lay-verify="required" autocomplete="off"
                   placeholder="请输入排序码"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限名称</label>
        <div class="layui-input-block">
            <input type="text" id="name" name="name" required lay-verify="required" autocomplete="off"
                   placeholder="请输入权限名称"
                   class="layui-input">
        </div>
    </div>

  <div class="layui-form-item">
        <label class="layui-form-label">权限编码</label>
        <div class="layui-input-block">
            <input type="text" id="percode" name="percode" required lay-verify="required" autocomplete="off"
                   placeholder="请输入权限编码"
                   class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">是否可用</label>
        <div class="layui-input-block">
            <input type="radio" name="available" value="1" title="可用" checked>
            <input type="radio" name="available" value="0" title="不可用">
        </div>
    </div>


    <div class="layui-input-block">
        <button type="submit" class="layui-btn" id="release" lay-submit="" lay-filter="release">保存</button>
        <button type="button" class="layui-btn layui-btn-danger" id="cancel">取消</button>
    </div>
</form>
<!--添加修改弹出层结束-->

<script src="/resources/layui/layui.js"></script>
<script>
    var tableIns;
    layui.extend({
        dtree: '/resources/layui/layui-ext/dtree/dtree'
    }).use(['table', 'form', 'jquery', 'dtree'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;

        dtree = layui.dtree;
        //第一个实例
        tableIns = table.render({
            elem: '#permissionTable'
            , height: 312
            , url: '/menu/loadAllPermissionForTable' //数据接口
            , page: true //开启分页
            , toolbar: "#tableToolbar"
            , cols: [
                [ //表头
                    {width: 80, type: 'checkbox'}
                    , {field: 'id', title: 'ID', width: 80}
                    , {field: 'pid', title: '父权限ID', width: 100}
                    , {field: 'name', title: '权限名称', width: 100}
                    , {field: 'percode', title: '权限编码', width: 150}
                    , {
                    field: 'available', title: '是否可用', width: 100, templet: function (data) {
                        return data.available == 1 ? '可用' : '不可用';
                    }
                }
                    , {field: 'ordernum', title: '排序码', width: 100}
                    , {title: '操作', width: 150, fixed: 'right', align: 'center', toolbar: '#cellToolbar'}
                ]
            ]
        });
        //弹出层的index
        var layerindex;

        //添加修改公用弹出层的路径
        var addFormUrl;


//监听事件
        table.on('toolbar(permissionTable)', function (obj) {
            // var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    addPermission();
                    break;
                // case 'batchDelete':
                //     layer.msg('批量删除');
                //     var checkStatus = table.checkStatus('permissionTable')
                //         , data = checkStatus.data;
                //
                //     layer.alert(JSON.stringify(data));
                //
                //     break;
            }
            ;
        });


        table.on('tool(permissionTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.data.id);

            switch (obj.event) {
                case 'update':
                    updatePermission(obj);
                    break;
                case 'delete':
                    deletePermission(obj);
                    break;
            }
            ;
        });

        /**
         *
         * 添加
         */
        function addPermission() {
            layer.msg('添加');
            layer.open({
                title: '添加权限',
                type: 1,
                area: ['500px', '400px'],
                content: $('#addForm'),
                success: function (layero, index) {
                    //清空表单里面的数据
                    $("#addForm")[0].reset();
                    // 使下拉框为不弹出状态

                    $(this).removeClass("layui-form-selected");
                    $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
                    //清空pid内容
                    layerindex = index;
                    $.post("/menu/loadMaxOrderNum", function (data) {
                        $("#ordernum").val(data);
                    })
                    addFormUrl = "/menu/addPermission";
                }
            });
        }

        /**
         * 修改权限
         * @param obj
         */
        function updatePermission(obj) {
            layer.open({
                title: '修改权限',
                type: 1,
                area: ['500px', '400px'],
                content: $('#addForm'),
                success: function (layero, index) {
                    //清空表单里面的数据
                    $("#addForm")[0].reset();
                    //装载默认数据

                    form.val("addForm", obj.data);

                    form.val("addForm", {available: obj.data.available + ""});

                    $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
                    // 下拉框回显
                    //设置下拉框里面的默认的上级权限的id
                    dtree.dataInit("slTree", obj.data.pid);
                    //设置输入框里面的默认的上级权限名称
                    //获得当前选中的
                    var param = dtree.getNowParam("slTree");
                    $("#input_permissionaccordiontree").val(param.context);


                    layerindex = index;
                    addFormUrl = "/menu/updatePermission";
                }
            });
        }


        /**
         *删除权限
         *
         */

        function deletePermission(obj) {
            layer.confirm("确定要删除{" + obj.data.name + "}吗?", {icon: 3, title: '提示'}, function (index) {

                $.post("/menu/deleteMenu", {id: obj.data.id}, function (data) {
                    layer.msg(data.msg)
                    if (data.code == 200) {
                        //刷新 树 表格 下拉树
                        //刷新表格
                        $("#doReset").click();
                        //刷新左侧树
                        window.parent.left.reloadTree();
                        //刷新下拉树
                        loadslTree();
                    }
                });
                layer.close(index);
            });
        }


        //弹出层下拉树开始

        function loadslTree() {
            var DTree = dtree.render({
                elem: "#slTree",
                method: "get",
                url: '/menu/loadAllLeftMenuManagerTree',
                icon: "1",
                dataStyle: "layuiStyle",  //使用layui风格的数据格式
                accordion: true
                , response: {
                    message: "msg",
                    statusCode: 0
                }
            });
        }

        loadslTree();

        $("#permissionaccordiontree").on("click", function () {
            $(this).toggleClass("layui-form-selected");
            $("#test").toggleClass("layui-show layui-anim layui-anim-upbit");
        });

        dtree.on("node(slTree)", function (obj) {
            var param = dtree.getNowParam("slTree"); // 获取当前选中节点
            $("#pid").val(param.nodeId);
            $("#input_permissionaccordiontree").val(obj.param.context);
            $("#permissionaccordiontree").toggleClass("layui-form-selected");
            $("#test").toggleClass("layui-show layui-anim layui-anim-upbit");
        });

        //弹出层下拉树结束


        //监控添加提交事件
        form.on("submit(release)", function (data) {
            var params = $("#addForm").serialize();
            var pid = $("#pid").val();
            $.post(addFormUrl, params, function (data) {
                layer.msg(data.msg);
            });

            //重置添加表单
            $("#addForm")[0].reset();
            //刷新表格 左侧树 弹出层表格
            // tableIns.reload();
            //刷新表格
            $("#doReset").click();
            //刷新左侧树
            window.parent.left.reloadTree();
            //刷新下拉树
            loadslTree();

            $(this).removeClass("layui-form-selected");
            $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
            layer.close(layerindex);
        });
        $("#cancel").click(function () {
            $("#addForm")[0].reset();
            $(this).removeClass("layui-form-selected");
            $("#test").removeClass("layui-show layui-anim layui-anim-upbit");
            layer.close(layerindex)
            //清空pid内容
            $("#pid").val("");
        })

        //监听查询事件
        form.on("submit(doSearch)", function (data) {
            var params = $("#searchFrm").serialize();
            tableIns.reload({
                url: '/menu/loadAllPermissionForTable?' + params
                // ,where:{
                //     page:1
                // }
            })
            //刷新表格
            return false;
        });
        //监控重置事件
        $("#doReset").click(function () {
            tableIns.reload({
                url: '/menu/loadAllPermissionForTable?'
                // ,where:{
                //     page:1
                // }
            })
            //刷新表格
            return false;
        });

    });

    function reloadTable(permissionid) {
        tableIns.reload({
            url: '/menu/loadAllPermissionForTable?id=' + permissionid,
            // where:{
            //     page:1
            // }
        })
    }
</script>
</body>

</html>